<template>
    <div class="container">
        <div class="top">
            <div class="t-left">院部新闻</div>
            <div class="t-right">查看更多</div>
        </div>
        <div class="swiper">
            <div class="item">
                <img src="../../assets/13.jpg" alt="">
                <div class="text">
                    <div class="year">2021-09-10</div>
                    <div class="title" style="font-size: 20px;color: red;">我校举办第一届技能大赛我校举办第一届唱、跳、rap大赛</div>
                </div>
            </div>
            <div class="item">
                <img src="../../assets/13.jpg" alt="">
                <div class="text">
                    <div class="year">2021-09-10</div>
                    <div class="title"  >我校举办第一届技能大赛我校举办第一届唱、跳、rap大赛</div>
                </div>
            </div>
            <div class="item">
                <img src="../../assets/13.jpg" alt="">
                <div class="text">
                    <div class="year">2021-09-10</div>
                    <div class="title"  style="font-size: 20px;color: red;" >我校举办第一届技能大赛我校举办第一届唱、跳、rap大赛</div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.container {
    display: flex;
    flex-wrap: wrap;
    width: 80%;
    margin: 30px auto;
    @media (max-width: 468px) {
        width: 90%;
    }
    .top {
                    display: none;
                    margin: 20px 0;
                    width: 100%;
                    height: 40px;

                    @media (max-width: 475px) {
                        display: flex;
                    justify-content: space-between;
                    }

                    .t-left {
                        width: 10%;
                        color: #4587c1;
                        font-weight: 500;
                        font-size: 24px;
                        line-height: 40px;

                        @media (max-width: 475px) {
                            width: 30%;
                        }
                    }

                    .t-right {
                        width: 10%;
                        text-align: center;
                        line-height: 40px;

                        @media (max-width: 475px) {
                            width: 30%;
                        }
                    }
                }

    .swiper {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-evenly;
        width: 100%;
        .item{
            position: relative;
            width: 26%;
            height: 240px;
            @media (max-width: 468px) {
                width: 100%;
                margin: 20px 0;
            }
            img {
                width: 100%;
                height: 100%;
            }
            .text{
                background-color: rgb(#387bbf, 0.5);
                position: absolute;
                top: 0;
                left: 0;
                width: 180px;
                height: 160px;
                padding: 10px 20px;
                display: flex;
                flex-wrap: wrap;
                .year{
                    text-align: center;
                    width: 70%;
                    height: 30px;
                    background-color: #f1d12b;
                    line-height: 30px;
                }
                .title{
                    width: 100%;
                    color: #fff;
                    font-size: 14px;
                }
            }
        }
    }
}
</style>